<template>
	<!-- 物料出入库导出页面 -->
	<a-card :bordered="false">
		<!-- 顶部筛选 -->
		<div class="table-page-search-wrapper">
			<a-form layout="inline" labelAlign="right">
				<a-row :gutter="48">
					<!-- <a-col :md="8" :sm="24">
            <a-form-item label="发货单号">
              <a-input v-model="queryParam.orderNumber" placeholder="请输入发货单号"/>
            </a-form-item>
          </a-col> -->
					<a-col :md="8" :sm="24">
						<a-form-item label="选择时间">
							<a-range-picker style="width:100%" v-model="queryParam.timeList" format="YYYY-MM-DD" />
						</a-form-item>
					</a-col>
					<!-- <a-col :md="8" :sm="24">
            <span class="table-page-search-submitButtons">
              <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
            </span>
          </a-col> -->
					<a-col :md="24" :sm="24" v-if="roleType == 1">
						<a-form-item label="物料类型">
							<a-radio-group default-value="" button-style="solid" v-model="queryParam.materialType">
								<a-radio-button value="">
									全部
								</a-radio-button>
								<a-radio-button :value="id"
									v-for="{ id, name } in [this.$businessEnum.MATERIAL_TYPE_ENUM.material, this.$businessEnum.MATERIAL_TYPE_ENUM.customized, this.$businessEnum.MATERIAL_TYPE_ENUM.cable, this.$businessEnum.MATERIAL_TYPE_ENUM.packing,]"
									:key="id">
									{{ name }}
								</a-radio-button>
							</a-radio-group>
						</a-form-item>
					</a-col>
					<a-col :md="24" :sm="24">
						<a-form-item label="供  应  商">
							<!-- <a-radio-group default-value="" button-style="solid" v-model="queryParam.orgIdSupplier">
								<a-radio-button value="">
									全部
								</a-radio-button>
								<a-radio-button :value="id"
									v-for="{ id, name } in $util.getOrgList([this.$businessEnum.ORG_TYPE_ENUM.PRIMARY_SUPPLIER.id, this.$businessEnum.ORG_TYPE_ENUM.NORMAL_SUPPLIER.id])"
									:key="id">
									{{ name }}
								</a-radio-button>
							</a-radio-group> -->
							<FCOrgRadioGroup1 v-model="queryParam.orgIdSupplier"
							:filter-types="materialType" />
						</a-form-item>
					</a-col>

					<a-col :md="24" :sm="24">
						<a-form-item label="归属公司">
							<a-radio-group default-value="" button-style="solid" v-model="queryParam.orgIdCompany">
								<a-radio-button value="">
									全部
								</a-radio-button>
								<a-radio-button :value="id"
									v-for="{ id, name } in $util.getOrgList($businessEnum.ORG_TYPE_ENUM.COMPANY.id)" :key="id">
									{{ name }}
								</a-radio-button>
							</a-radio-group>
						</a-form-item>
					</a-col>
					<a-col :md="24" :sm="24">
						<div style="width: 100%;display: flex;justify-content: space-around;">
							<Export text="入库明细导出" type="default"
								style="background-color: #f0aa13;color: #fff;font-size: 16px;height: 40px;width: 155px;" title="入库明细表"
								url="/emsMaterialExportRecord/warehousingExport" :obj="{
									orgIdSupplier: queryParam.orgIdSupplier,
									orgIdCompany: queryParam.orgIdCompany,
									classType: 1,  //1物料  2成品、海外仓
									materialType: this.roleType == 1 ? queryParam.materialType : this.materialType,
									roleType: this.roleType,
									startTime: appendTime(queryParam.timeList)[0],
									endTime: appendTime(queryParam.timeList)[1],
								}" @ok="$refs.table.refresh()" />								
							<Export text="出库明细导出" type="primary"
								style="background-color: #139ff0;color: #fff;font-size: 16px;;height: 40px;width:155px;" title="出库明细表"
								url="/emsMaterialExportRecord/outboundExport" :obj="{
									classType: 1,  //1物料  2成品、海外仓
									orgIdSupplier: queryParam.orgIdSupplier,
									orgIdCompany: queryParam.orgIdCompany,
									materialType: this.roleType == 1 ? queryParam.materialType : this.materialType,
									roleType: this.roleType,
									startTime: appendTime(queryParam.timeList)[0],
									endTime: appendTime(queryParam.timeList)[1],
								}" @ok="$refs.table.refresh()" />
						</div>
					</a-col>

				</a-row>
			</a-form>
		</div>
		<!-- 表格 -->
		<s-table ref="table" style="margin-top: 15px;" size="default" :columns="columns" :data="loadData" :alert="true">
			<!-- 详情 -->
			<!-- <span slot="orgName" slot-scope="text, record">
        <span>{{ '这是详情的内容' }}</span> <br>
        <span>{{ '这是详情的内容' }}</span> <br>
        <span>{{ '这是详情的内容' }}</span> <br>
      </span> -->
			<span slot="action" slot-scope="text, record">
				<a-button type="primary" icon="download" :disabled="!record.url">
					<a :style="{ color: record.url ? '#fff' : '#cbb8d7' }"
						:href="`${$store.state.baseUrl}/sysFileInfo/preview?id=${record.url}`">下载</a>
				</a-button>
				<a-popconfirm placement="topRight" title="确认删除？" @confirm="() => handleDelete(record)">
					<a-button type="danger" icon="delete">删除</a-button>
				</a-popconfirm>
			</span>
		</s-table>
		<!--  新增编辑详情弹框  -->
		<addAndEdit ref="addAndEdit" />

	</a-card>
</template>

<script>
import { STable } from '@/components'
import { page, del } from '@/api/modular/main/materialExport'
import addAndEdit from './addAndEdit'
import FCOrgRadioGroup1 from '@/components/FcOrgRadioGroup/FCOrgRadioGroup1'


export default {
	components: {
		STable,
		addAndEdit,
		FCOrgRadioGroup1
	},
	mounted() {
		console.log('@@@@', process)
	},
	computed: {
		roleType() {
			return this.routePath.roleType;
		},
		materialType(){
			return this.routePath.materialType;
		},
		routePath() {
			let urlParam = this.$util.getUrlParam(this.$route.path);
			console.log(urlParam, "urlParam");

			return urlParam
		},
	},
	data() {
		return {
			queryParam: {},  // 查询参数
			columns: [
				{
					title: '序号',
					width: '80px',
					customRender: (text, record, index) => `${index + 1}`
				},
				{
					title: '时间',
					dataIndex: 'createTime'
				},
				{
					title: '类型',
					dataIndex: 'type',
					customRender: (text, record, index) => {
						return text == 1 ? '入库' : text == 2 ? '出库' : '--'
					}
				},
				// {
				//   title: '详情',
				//   dataIndex: 'orgName',
				// 	scopedSlots: {customRender: 'orgName'}
				// },
				{
					title: '操作',
					align: 'center',
					width: '250px',
					scopedSlots: { customRender: 'action' }
				}
			],
			// 加载数据方法 必须为 Promise 对象
			loadData: parameter => {
				let query = {
					// ...this.queryParam,
					...parameter,
					classType: 1,  //1物料  2成品、海外仓
					roleType: this.roleType,
					materialType: this.roleType == 1 ? this.queryParam.materialType : this.materialType,
					// orderType: this.orderType,
					// startTime: this.appendTime(this.queryParam.timeList)[0],
					// endTime: this.appendTime(this.queryParam.timeList)[1],
				}
				// delete query.timeList
				return page(query).then((res) => {
					return res.data
				})
			},
			scheduleProductionVisible: false,
			selectedRowKeys: [],
			selectedRows: [],
			defaultExpandedKeys: [],
			replaceFields: {
				key: 'id',
			},
		}
	},
	methods: {
		handleDownload(url) {
			if (!url) {
				return this.$message.error('下载地址为空')
			}
			this.download(url, `${this.title}_${this.dayjs(new Date()).format('YYYY/MM/DD HH:mm:ss')}.xls`).then(res => {
				return this.$message.success('下载成功')
			})
		},
		handleDelete(row) {
			del({ id: row.id }).then(res => {
				this.$message.success('删除成功')
				this.$refs.table.refresh()
			})
		},
		handleOk() {
			this.$refs.table.refresh()
		},
		onSelectChange(selectedRowKeys, selectedRows) {
			this.selectedRowKeys = selectedRowKeys
			this.selectedRows = selectedRows
		},
	}
}
</script>

<style lang="less">
.table-operator {
	margin-bottom: 18px;
}

button {
	margin-right: 8px;
}
</style>
